<template>
<view class="page-body">
	<view class="goods flex">
		<view class="goods-img">
			<image :src="goodsmsg.goods_thumb"></image>
		</view>
		<view class="goods-msg">
			<view class="p text_over">{{goodsmsg.goods_name}}</view>
			<view class="sub-p text_over2">{{goodsmsg.attr_value_str}}</view>
		</view>
	</view>
	<form @submit="formSubmit" >
		<view class="comment-body">
			<view class="flex dafen">
				<view class="dafen-i" v-for="(item,i) in commentNav" :key="i" :class="{'on':i==clickid}" @click="changeNav(i)">
					<!-- <image v-if="i!=clickid" :src="item.img+'.png'"></image>
					<image v-else :src="item.img+'_on.png'"></image> -->
					<view v-if="i!=clickid" class="img" :style="{'background-image':'url('+item.img+')'}"></view>
					<view v-else class="img" :style="{'background-image':'url('+item.img_on+')'}"></view>
					<view class="dafen-text">{{item.name}}</view>
				</view>
			</view>
			
		</view>
	<!-- 图片上传 -->
		<view class="textarea">
			<textarea name="" id="" cols="30" rows="10" placeholder="点击上方的好评，中评，差评可给宝贝进行评价，可帮助到更多小伙伴哦！" v-model="content"></textarea>
		</view>
		<view class="uploadImg">
		    <view class="weui-uploader__bd">
		        <view class="weui-uploader__files ">
		        <block v-for="(image , index) in imageList" :key="index">
		            <view class="weui-uploader__file">
		                <image v-if="image" class="weui-uploader__img" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill"></image>
						<text  class="icon jian"  @click="delImage(index)"></text>
		            </view>
		        </block>
		        </view>
		        <view class="weui-uploader__input-box" v-if="!isHide">
		            <view class="weui-uploader__input" @click="chooseImage"></view>
		            <text class="p-txt">最多上传{{size}}张</text>
		        </view>
		    </view>
		</view>
		<view class="btn">
			<button class="submit" form-type="submit">确定提交</button>
		</view>
	</form>
</view>
</template>

<script>
	var that;
	import {httpReq} from '@/utils/request.js';
	export default{
		data(){
			return {
				imageList:[],
				UploadGredentials:[],
				commentNav:[{
					img:"/static/img/evaluation/good.png",
					img_on:"/static/img/evaluation/good_on.png",
					name:"好评"
				},{
					img:"/static/img/evaluation/medium.png",
					img_on:"/static/img/evaluation/medium_on.png",
					name:"中评"
				},{
					img:"/static/img/evaluation/negative.png",
					img_on:"/static/img/evaluation/negative_on.png",
					name:"差评"
				}],
				clickid:0,
				goodsmsg:"",
				isHide:false,
				size:6,
				content:""
			}
		},
		onLoad(options){
			that = this;
			let goodsmsg = this.goodsmsg = JSON.parse(decodeURIComponent(options.goodsmsg))
			that.oid = goodsmsg.id;
			that.gid =goodsmsg.gid;
		},
		methods:{
			chooseImage: function () {
			    var _this = this;
			    let imageList = this.imageList;
				if(imageList.length>=that.size){
					this.$showToast("已超过上传数量");return;
				}
			    uni.chooseImage({
					count:that.size,
			    	success: function(res) {
						res.tempFilePaths.forEach((item)=>{
							if(imageList.length >=that.size){
								that.isHide = true;
							}else{
								imageList.push(item)
							}
						})
						that.imageList = imageList;
			    	}
			    })
			  },
			  delImage: function (index) {
			    let imageList = this.imageList;
			    imageList.splice(index, 1)
			    if (imageList.length < that.size) {
					this.isHide = false;
					this.imageList = imageList
			    }
			  },
			  formSubmit: function(e) {
				let content = this.content;
				let contlen =content.length
			  	if (contlen==""||contlen<5) {
			  		this.$showToast("请至少评价5个字哦");
			  		return;
			  	}
				var imglist = that.imageList.slice(0)
				uni.showLoading()
			  	that.UploadBatchImages(imglist); //上传图片
			  },
			  UploadBatchImages: function(imglist) {
			  	var currentuploadimg = imglist.shift();
			  	if (currentuploadimg) {
			  			httpReq.upLoadFile({
			  				url:'/user/imgUpload',
			  				filePath: currentuploadimg,
			  				name: 'file',
							formData:{
								type:"comments"
							},
			  				success: function(res) {
			  					that.UploadGredentials.push(res.data);
			  				},
			  				complete: function(res) {
			  					if (imglist.length > 0) {
			  						that.UploadBatchImages(imglist);
			  					} else {
			  						that.AddInfo();
			  					}
			  				}
			  			})
			  	} else {
			  		that.AddInfo();
			  	}
			  },
			  AddInfo: function(temp) {
				let file = this.UploadGredentials.join('|');
				let grade = parseInt(that.clickid)+1
			  	this.$https.POST({
			  		url:'/comment/comment',
			  		data:{
			  		  oid: that.oid,
			  		  gid:that.gid,
			  		  grade:grade,
					  parent_id:"",
			  		  content:that.content,
			  		  files_path:file
			  		},
			  		success(res){
			  			that.$showToast(res.message);
			  			uni.redirectTo({
			  				url:"/pages/user/order_list/order_list?tbIndex=-1"
			  			})
						uni.hideLoading()
			  		},
					failcb(){
						uni.hideLoading()
					}
			  	})
			  },
			  previewImage(){
				  
			  },
			changeNav(i){
				this.clickid = i
			}
		},
		onUnload(){
			that=null;
		}
	}
	
</script>

<style lang="scss">
	page{background: #f5f5f5; padding-bottom: 105rpx;}
	.comment-body{background: #fff;}
	.dafen{
		border-bottom: 1px solid #E5E5E5;
		justify-content: center;
		padding-top:50upx; 
		padding-bottom:50upx;
		text-align: center;
		.img{width: 88upx;height: 88upx;background: url(/static/img/evaluation/good.png) no-repeat center;background-size:88upx ;}
		.dafen-i{margin: 0 60upx; }
		.dafen-text{
			font-size: 30upx; line-height: 60upx;
		}
		.dafen-i.on .dafen-text{
			color: #F3B954;
		}
	}
	.textarea{
		background:#fff; position:relative;
		textarea{font-size: 28upx;padding:35upx 30upx;height: 300upx;width: 100%;box-sizing: border-box;}
		
	}

	.uploadimg image {
		border: 1rpx solid #e0e0e0;
		overflow: hidden;
		margin-bottom: 8px;
	}
	.btn {
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		margin-bottom: 50rpx;
		width: 96%;
	}
	
	.submit {
		color: #fff;
		width: 70%;
		border-radius: 40rpx;
		margin-top: 48rpx;
		font-size: 36rpx;
		line-height: 80rpx;
		background:$maincolor;
		border: none;
	}
	.goods{
		display: flex;background: #fff; height: 150rpx; padding:30upx; box-sizing:border-box;
		&-img{
			image{width:88rpx;height: 88rpx;}background: #ccc;
		}
		&-msg{
			margin-left:18rpx; flex:1; box-sizing: border-box; overflow:hidden;
			.p{font-size: 30upx;color: #232323;}
			.sub-p{color: #bebebe;font-size: 26upx;padding-top:10upx;color: #929292;}
		}
	}
	
	/* 上传图片 */
	.uploadImg{
	  padding-left: 30rpx;
	  box-sizing: border-box;
	  margin-bottom:30rpx;
	  box-sizing: border-box;
	}
	.p-txt{
	  position: absolute;
	  bottom: -46rpx;
	  left: 0;
	  width: 100%;
	  text-align: center;
	}
	
	.weui-uploader__bd {
	  // overflow: hidden;
	  margin-top:40rpx; 
	}
	.weui-uploader__files{
	  position: relative;
	}
	.weui-uploader__file {
	  float: left;
	  margin-right: 80rpx;
	  margin-bottom: 50rpx;
	  position: relative;
	}
	.weui-uploader__file:nth-of-type(3n){margin-right: 0;}
	.jian{
	  position: absolute;
	  right: -10rpx;
	  top: -20rpx;
	  color: #fff;
	  font-size: 30rpx;
	  background: $maincolor;
	  width: 36upx;
	  height: 36upx;
	  text-align: center;
	  border-radius: 50%;
	  line-height: 36upx;
	}
	.weui-uploader__img {
	  display: block;
	  width: 164rpx;
	  height:164rpx;
	}
	.weui-uploader__file_status {
	  position: relative;
	}
	.weui-uploader__file_status:before {
	  content: " ";
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	}
	.weui-uploader__file-content {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
	          transform: translate(-50%, -50%);
	  color: #FFFFFF;
	}
	  .weui-uploader__input-box {
	    float: left;
	    position: relative;
	    margin-right: 20rpx;
	    margin-bottom: 50rpx;
	    width: 164rpx;
	    height:164rpx;
		background: url() center/164rpx no-repeat;
		background-size:164rpx ;
	  }
	 
	  .weui-uploader__input-box:active {
	    border-color: #999999;
	  }
	  .weui-uploader__input-box:active:before,
	  .weui-uploader__input-box:active:after {
	    background-color: #999999;
	  }
	  .weui-uploader__input {
	    position: absolute;
	    z-index: 1;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	  }
</style>
